<template>
    <div class="modal" :class="{ 'is-active': showMenu }">
        <div class="modal-background" @click="toggleMenu"></div>
        <div class="modal-content">
            <div class="panel control-set">
                <p class="panel-heading">
                    Fancy Slide
                    <span class="icon is-pulled-right window-control" title="最大化/还原窗口" @click.stop="toggleMaximize">
                        <i class="fa fa-window-maximize" v-show="!isMaximized"></i>
                        <i class="fa fa-window-restore" v-show="isMaximized"></i>
                    </span>
                    <span class="icon is-pulled-right window-control" title="最小化窗口" @click.stop="minimize">
                        <i class="fa fa-window-minimize"></i>
                    </span>
                </p>
                <a href="javascript:void(0);" class="panel-block" @click.stop="lockdown">
                    <span class="panel-icon">
                        <i class="fa fa-lock"></i>
                    </span> 锁定
                </a>
                <a href="javascript:void(0);" class="panel-block" @click.stop="pendingDirectorySelect">
                    <span class="panel-icon">
                        <i class="fa fa-folder-open"></i>
                    </span> 打开文件夹
                </a>
                <a href="javascript:void(0);" class="panel-block" @click.stop="switchFullScreen">
                    <span class="panel-icon">
                        <i class="fa" :class="fullScreenIcon"></i>
                    </span> {{fullScreen ? '退出全屏幕显示' : '进入全屏幕显示' }}
                </a>
                <a href="javascript:void(0);" class="panel-block" @click.stop="showOptions">
                    <span class="panel-icon">
                        <i class="fa fa-gear"></i>
                    </span> 设置
                </a>
                <a href="javascript:void(0);" class="panel-block" @click.stop="pendingQuit">
                    <span class="panel-icon">
                        <i class="fa fa-power-off"></i>
                    </span> 退出
                </a>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.control-set {
    background-color: white;
}

.window-control {
    margin: 0.2rem;
    cursor: pointer;
}
</style>


<script>
import { remote } from 'electron';
import { mapState, mapGetters, mapActions } from 'vuex';
import _ from 'lodash';

export default {
    data() {
        return {
            isMaximized: false,
            bounds: null
        }
    },
    computed: {
        ...mapState({
            fullScreen: state => state.App.fullScreen,
            showMenu: state => state.App.showMenu,
            selectedDirectory: state => state.Queue.selectedDirectory
        }),
        currentWindow() {
            return remote.getCurrentWindow();
        },
        fullScreenIcon() {
            return this.fullScreen ? 'fa-compress' : 'fa-expand';
        }
    },
    methods: {
        ...mapActions([
            'pendingQuit', 'pendingDirectorySelect', 'lockdown', 'enterFullScreen', 'leaveFullScreen', 'showOptions', 'toggleMenu'
        ]),
        switchFullScreen() {
            if (this.fullScreen) {
                this.leaveFullScreen();
            } else {
                this.enterFullScreen();
            }
            this.currentWindow.setFullScreen(this.fullScreen);
        },
        minimize() {
            this.currentWindow.minimize();
        },
        toggleMaximize() {
            if (this.isMaximized) {
                this.isMaximized = false;
                this.currentWindow.setBounds(this.bounds, true);
            } else {
                this.isMaximized = true;
                this.bounds = this.currentWindow.getBounds();
                this.currentWindow.maximize();
            }
        }
    }
}
</script>
